import React, { useEffect } from 'react'
import { Modal, Form, Input, Radio, DatePicker } from 'antd'
import moment from 'moment'


const CollectionCreateForm = ({ visible, onCreate, onCancel, editType, editMessage }) => {
  const [form] = Form.useForm()
  useEffect(() => {
    const initVal = {
      ...editMessage,
      createdAt: moment(editMessage.createdAt)
    }
    form.setFieldsValue(initVal)
  },[editMessage])

  return (
    <Modal
      visible={visible}
      forceRender
      title={editType === 'create' ? '保存' : '修改'}
      okText="保存"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {//验证通过
            values = {
              ...values,
              createdAt: +values.createdAt
            }
            form.resetFields()
            onCreate(values)
          })
          .catch((info) => {//验证失败
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="name"
          label="姓名"
          rules={[
            {
              required: true,
              message: '必须填写访问者姓名！',
            },
          ]}
        >
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item name="sex" label="性别">
          <Radio.Group>
            <Radio value="male">男</Radio>
            <Radio value="semale">女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="cid"
          label="身份证"
          rules={[
            {
              required: true,
              message: '必须填写访问者身份证号码！',
            },
          ]}
         >
          <Input placeholder="请输入身份证号码" />
        </Form.Item>
        <Form.Item name="address" label="地址">
          <Input placeholder="请输入地址" />
        </Form.Item>
        <Form.Item name="phone" label="电话">
          <Input placeholder="请输入电话" />
        </Form.Item>
        <Form.Item name="createdAt" label="到访时间">
          <DatePicker showTime />
        </Form.Item>
        <Form.Item name="_id" label="主键" hidden>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default CollectionCreateForm